<template>
  <div class="container-setting">
    <el-card>
      <div slot="header">
        <my-bread>个人设置</my-bread>
      </div>
      <!-- 栅格 -->
      <el-row>
        <!-- 信息表单 -->
        <el-col :span="12">
          <el-form label-width="120px">
            <el-form-item label="编号：">{{userForm.id}}</el-form-item>
            <el-form-item label="手机：">{{userForm.mobile}}</el-form-item>
            <el-form-item label="媒体名称：">
              <el-input v-model="userForm.name" placeholder="请输入媒体名称"></el-input>
            </el-form-item>
            <el-form-item label="媒体介绍：">
              <el-input type="textarea" :rows="3" v-model="userForm.intro" placeholder="请输入媒体介绍"></el-input>
            </el-form-item>
            <el-form-item label="邮箱：">
              <el-input v-model="userForm.email" placeholder="请输入邮箱"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="updateUserInfo()">保存设置</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <!-- 修改头像 -->
        <el-col :span="12">
          <!-- action 必须写，el-upload的要求 -->
          <el-upload
            class="avatar-uploader"
            action=""
            :http-request="changeFile"
            :show-file-list="false">
            <img v-if="userForm.photo" :src="userForm.photo" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <p class="text">修改头像</p>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import eventBus from '@/eventBus'
import auth from '@/utils/auth'
export default {
  name: 'setting-page',
  data () {
    return {
      // 个人信息
      userForm: {
        id: null,
        mobile: null,
        name: null,
        intro: null,
        email: null,
        photo: null
      }
    }
  },
  created () {
    this.getUserInfo()
  },
  methods: {
    // 选择图片后执行函数（默认参数）
    async changeFile ({ file }) {
      // console.log(obj) 包含选择后的文件对象 obj.file
      try {
        // 进行上传
        // 1. 得到选择的图片数据  input[type=file]---->dom对象.files[0]----->文件对象
        // 2. 组装成formData对象
        const formData = new FormData()
        formData.append('photo', file)
        // 3. 使用axios提交数据
        const { data: { data } } = await this.$http.patch('/user/photo', formData)
        // 4. 成功
        // 4.1 提示：修改头像成功
        this.$message.success('修改头像成功')
        // 4.2 上传成功后的图片进行预览
        this.userForm.photo = data.photo
        // 4.3 同步更新Layout组件的头像
        eventBus.$emit('update-user-photo', data.photo)
        // 4.4 同步更新本地存储的头像
        const localUser = auth.getUser()
        localUser.photo = data.photo
        auth.setUser(localUser)
      } catch (e) {
        // 5. 失败 提示即可
        this.$message.error('修改头像失败')
      }
    },
    // 获取用户信息
    async getUserInfo () {
      const { data: { data } } = await this.$http.get('/user/profile')
      this.userForm = data
    },
    // 编辑用户信息
    async updateUserInfo () {
      try {
        // 接口只需三个字段：name,intro,email
        const { name, intro, email } = this.userForm
        // 提交请求
        await this.$http.patch('/user/profile', { name, intro, email })
        // 成功提示
        this.$message.success('保存设置成功')
        // 同步Layout组件的用户名称
        eventBus.$emit('update-user-name', name)
        // 同步本地存储的用户名称
        // 拿出数据
        const localUser = auth.getUser()
        // 修改数据
        localUser.name = name
        // 存储数据
        auth.setUser(localUser)
      } catch (e) {
        // 失败
        if (e.response && e.response.status === 409) {
          return this.$message.error('媒体名称已存在')
        }
        this.$message.error('保存设置失败')
      }
    }
  }
}
</script>

<style scoped lang='less'>
.text{
  text-align: center;
  font-size: 12px;
}
</style>
